<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">标签管理</block>
    </cu-custom>

    <uni-swipe-action>
      <uni-swipe-action-item v-for="(item,index) in tabBars2" :options="item.options" :key="item.id" @change="swipeChange"
        @click="swipeClick($event, item.id)">
        <view style="padding: 40rpx 30rpx;border-bottom: 1px solid #eee;width: 100%;font-size: 30rpx;">{{item.name}}</view>
      </uni-swipe-action-item>
    </uni-swipe-action>

    <view class="adds" @click="toggle('center')">+ 添加自定义标签</view>

    <uni-popup id="popup2" ref="popup2" :type="type" :animation="true">
      <view class="settings-tag u-f-ajc">
        <view>新建标签</view>
        <view style="border-radius: 30upx;padding: 10upx;color: #666;margin: 10upx;border: 2upx solid #666;width: 90upx;">
          <input type="text" placeholder="其它" v-model="qita" @blur='qitainput' />
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabBars2: [],
        qita: '',
        type: 'center',
      }
    },
    onLoad() {
      this.getTag();
    },
    methods: {
      async getTag() {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/training/getAllActionLabel",
          data: {
            bId: 1
          }
        })
        this.tabBars2 = datas;
        let siwpers = {
          options: [{
            text: '删除',
            style: {
              backgroundColor: 'rgb(255,58,49)'
            }
          }],
          sid: 0,
          content: 'item1'
        }
        this.tabBars2.forEach((item, index) => {
          Object.assign(item, siwpers)
        })
      },
      toggle(type) {
        this.type = type
        this.$refs.popup2.open()
      },
      async qitainput() {
        if (this.qita !== '' && this.qita !== null) {
          uni.showToast({
            title: '添加标签中...',
            icon: 'loading',
            duration: 1000,
          })
          let res = await this.$myRuquest({
            url: "/coach/training/addActionLabel",
            method: "POST",
            data: {
              labelName: this.qita,
              bId: 1
            }
          })
          uni.showToast({
            title: '添加成功',
            icon: 'success',
          })
          this.getTag();
          this.$refs.popup2.close();
        }
        this.qita = '';
      },
      swipeChange(e) {
        console.log('返回：', e);
      },
      swipeClick(e, id) {
        let {
          content
        } = e
        if (content.text === '删除') {
          uni.showModal({
            title: '提示',
            content: '是否删除',
            success: (res) => {
              console.log('用户点击了删除', res, id)
              this.deleteServer(id)
              if (res.confirm) {} else if (res.cancel) {
                console.log('用户点击取消');
              }
            }
          });
        }
      },
      async deleteServer(labelId) {
        uni.showLoading({
          title: "正在删除..."
        })
        let {
          data: {
            result
          }
        } = await this.$myRuquest({
          url: "/coach/training/deleteActionLabel?labelId=" + labelId,
          method: "DELETE",
        })
        if (result == 200) {
          uni.showToast({
            title: '删除成功~',
            icon: "success",
            duration: 1000
          });
          this.getTag();
        }
        uni.hideLoading();
      },
    }
  }
</script>

<style lang="scss">
  .adds {
    padding: 40rpx 30rpx;
    width: 100%;
    margin-top: 30rpx;
    background-color: #FFFFFF;
    text-align: center;
    color: $uni-color-zhuti;
  }

  .settings-tag {
    // width: 50vw;
    // height: 200rpx;
    background-color: #FFFFFF;
    flex-direction: column;
    padding: 20rpx 50rpx;
  }
</style>
